<template>
	<view class="my_container">
		<view class="my_box">
			<!-- 分销员信息 -->
			<view class="user_box">
				<view class="user_avatar_box">
					<view class="avatar_box">
						<image :src="personMsgObj.small_shop_image ? personMsgObj.small_shop_image : defaultAvatar"
							mode="" class="avatar_img">
						</image>
					</view>
					<view class="user_msg_box">
						<view class="user_phone">
							{{userInfo.name}}
						</view>
						<view class="user_level">
							合伙人
						</view>
					</view>
				</view>

				<view class="user_promotion_box" v-if="userInfo.level !== 3" @click="handlerSpread('spread')">
					<image :src="promotionIcon" mode="" class="user_promotion_img"></image>
				</view>
			</view>

			<!-- 提现 -->
			<commission-record :personMsgObj="personMsgObj" :userAccumulated="userAccumulated"></commission-record>

			<!-- 招募分销员图片 -->
			<view class="promotion_img_box" @click="handlerSpread('spread')" v-if="userInfo.level !== 3">
				<image :src="promotionHeaderImg" mode="widthFix" class="promotion_img"></image>
			</view>

			<!-- 数据统计 -->
			<data-statistics :fxuserDataObj="fxuserDataObj"></data-statistics>

			<!-- 教学 -->
			<proxy-teach :proxyTeach="proxyTeach"></proxy-teach>

			<!-- 基本功能 -->
			<distribution :userInfo="userInfo" :isFollow="isFollow" @distributorsRecruit="distributorsRecruit"
				@myStore="myStore">
			</distribution>
		</view>

		<!-- 公众号二维码弹窗 -->
		<u-popup v-model="showOfficialAccount" mode="center" border-radius="12">
			<view class="popup_official_box">
				<canvas style="width: 100%;height:100%;" canvas-id="code">
					<img :src="officialAccountImg" alt="" class="popup_official_img" />
				</canvas>
				<!-- <image :src="officialAccountImg" mode="widthFix" :show-menu-by-longpress="true"></image> -->
			</view>
			<view class="popup_official_title">
				请先关注公众号
			</view>
		</u-popup>
		<!-- 倒计时 -->
		<!-- <view>
			<view v-for="(item, index) in times" :key="index">{{ item.currentTime }}</view>
		</view> -->
	</view>
</template>

<script>
	import {
		countDownFun
	} from '@/utils/times.js'
	import ProxyTeach from '@/pages/my/components/proxyTeach.vue'
	import Distribution from '@/pages/my/components/distribution.vue'
	import CommissionRecord from '@/pages/my/components/commissionRecord.vue'
	import DataStatistics from '@/pages/my/components/dataStatistics.vue'
	import imageUrl from '@/utils/imgUrl.js'
	export default {
		components: {
			ProxyTeach,
			Distribution,
			CommissionRecord,
			DataStatistics
		},
		data() {
			return {
				promotionIcon: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/668366ae1294f_1719887534.png',
				promotionHeaderImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/668362b307b8b_1719886515.png',
				// 倒计时
				// times: [{
				// 		haveTime: new Date('2023-07-11 16:06:00')
				// 	},
				// ],
				userInfo: '',
				imgUploadUrl: '',
				defaultAvatar: '/static/my/icon-default-avatar.png',
				personMsgObj: {},
				showPopup: false,
				promotionImg: '',
				proxyTeach: [],
				fxuserDataObj: {},
				isFollow: '',
				showOfficialAccount: false,
				officialAccountImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/lunbo_image/660ccdfd97e61_1712115197.jpg',
				userAccumulated: ''
			}
		},
		onShow() {
			this.getUserInfo()
			this.getUserGetpayAll()
			this.getQandaTypeListFront()
			this.getAgentDataCount()
			this.userInfo = uni.getStorageSync('userInfo')
			this.imgUploadUrl = imageUrl.uploadImgUrl
			this.promotionUrl = imageUrl.promotionImgUrl
		},
		onLoad() {
			// this.timer(this.times); // 倒计时

		},
		methods: {
			// 获取佣金记录、提现记录、可提现的接口
			getUserGetpayAll() {
				this.$request('/api/getUserGetpayAll', {}, 'GET').then(res => {
					if (res.code == 1) {
						this.userAccumulated = res.data
					} else {
						return
					}
				})
			},


			distributorsRecruit(val) {
				this.getFxuserIsSubscribe(val)
			},

			myStore(val) {
				this.getFxuserIsSubscribe(val)
			},

			// 是否关注公众号
			getFxuserIsSubscribe(val) {
				const that = this
				if (val == 'distributorsRecruit') {
					// 调分享员招募
					uni.navigateTo({
						url: '/pages/my/distributorsPromote/distributorsPromote'
					})
				} else if (val == 'myStore') {
					// 挑我的小店
					uni.navigateTo({
						url: '/pages/my/myStore/myStore'
					})
				} else if (val == 'spread') {
					// 顶部分销员招募
					uni.navigateTo({
						url: '/pages/my/distributorsPromote/distributorsPromote'
					})
				}
			},

			// 数据统计接口
			getAgentDataCount() {
				this.$request('/api/getAgentDataCount', {}, 'GET').then(res => {
					if (res.code == 1) {
						this.fxuserDataObj = res.data
					} else {

						return
					}
				})
			},

			// 代理教学-问题分类
			getQandaTypeListFront() {
				this.$request('/api/getQandaTypeListFront', {}, 'GET').then(res => {
					if (res.code == 1) {
						this.proxyTeach = res.data
						this.proxyTeach.forEach(item => {
							if (item.name == '如何提单') {
								item.img = 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/668365b2a9ebc_1719887282.png'
							} else if (item.name == '如何分销') {
								item.img = 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/668365c95f3cd_1719887305.png'
							} else if (item.name == '系统问题') {
								item.img = 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/668365daf0ba1_1719887322.png'
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			handlerPreview() {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = this.promotionUrl + this.promotionImg;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
				this.showPopup = false
			},

			// 获取用户信息
			getUserInfo() {
				this.$request('/api/getAgentInfo', {
					id: uni.getStorageSync('userInfo').id
				}, 'GET').then(res => {
					if (res.code == 1) {
						let userInfo = uni.getStorageSync('userInfo')
						this.personMsgObj = res.data
						userInfo = res.data
						uni.setStorageSync('userInfo', userInfo)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 获取推广海报
			getShareImg() {
				this.$request('/api/createUserPoster', {
					id: uni.getStorageSync('userInfo').id
				}, 'POST').then(res => {
					if (res.code == 1) {
						this.promotionImg = res.data
						this.showPopup = true
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 点击头像跳转个人信息修改
			handlerAvatar() {
				// uni.navigateTo({
				// 	url: '/pages/my/personalData/personalData'
				// })
			},

			// 一键推广
			handlerSpread(val) {
				// this.getShareImg()
				this.getFxuserIsSubscribe(val)
			},
		}
	}
</script>

<style lang="scss">
	.my_container {

		.my_box {
			width: 100%;
			min-height: 100vh;
			background-image: url('/static/my/new/img-bgc.jpg');
			background-repeat: no-repeat;
			background-position: left top;
			background-size: 100% 100%;

			.user_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 33rpx 0 30rpx 49rpx;

				.user_avatar_box {
					display: flex;
					align-items: center;

					.avatar_box {
						width: 120rpx;
						height: 120rpx;
						margin-right: 20rpx;

						.avatar_img {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.user_phone {
						font-family: my-font;
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}

					.user_level {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 26rpx;
						color: #808080;
						padding-top: 14rpx;
					}
				}


				.user_promotion_box {
					width: 286rpx;
					height: 68rpx;

					.user_promotion_img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.promotion_img_box {
				margin: 0 19rpx;

				.promotion_img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.popup_official_box {
			width: 550rpx;
			height: 550rpx;

			.popup_official_img {
				width: 100%;
				height: 100%;
			}
		}

		.popup_official_title {
			font-size: 28rpx;
			text-align: center;
			padding: 0 0 20rpx;
		}
	}
</style>